<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>班级相册</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
      <h1>国贸联联看</h1>
    <nav>
        <ul>
            <li><a href="index.html">主页</a></li>
            <li><a href="class-intro.html">班级介绍</a></li>
            <li><a href="learning-garden.html">学习园地</a></li>
            <li><a href="class-news.html">班级新闻</a></li>
            <li><a href="class-album.html">班级相册</a></li>
            <li><a href="music-appreciation.html">音乐欣赏</a></li>
        </ul>
    </nav>
</header>
<main>
    <section>
        <h2>班级相册</h2>
        <p>欢迎来到我们的班级相册！在这里您可以查看班级的各种活动照片，捕捉每一个珍贵瞬间。</p>
        
        <!-- 图片网格布局 -->
        <div class="album-grid">
            <!-- 示例图片项 -->
            <div class="album-item">
                <img src="images/activity1.jpg" alt="活动一">
                <p>班级郊游</p>
            </div>
            <div class="album-item">
                <img src="images/activity2.jpg" alt="活动二">
                <p>运动会</p>
            </div>
            <div class="album-item">
                <img src="images/activity3.jpg" alt="活动三">
                <p>元旦晚会</p>
            </div>
            <div class="album-item">
                <img src="images/activity4.jpg" alt="活动四">
                <p>科技节</p>
            </div>
            <!-- 可根据需要添加更多图片项 -->
        </div>
    </section>
</main>
<footer>
    <p>&copy; 2024 班级网站. All rights reserved.</p>
</footer>
</body>
</html>